{% extends 'base.html' %}

{% block title %}首页 - 小说阅读网{% endblock %}

{% block content %}
    <h1>热门小说</h1>
    <button id="addNovelBtn" class="btn">新增小说</button>
    <table class="novel-table">
        <thead>
            <tr>
                <th>小说名称</th>
                <th>当前章节</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for novel in novels %}
            <tr>
                <td>{{ novel.title }}</td>
                <td>{{novel.current_chapter}}</td>
                <td>
                    <a href="{{ url_for('read_chapter', novel_id=novel.id, chapter_id=novel.current_chapter) }}" class="btn">阅读</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- 新增小说模态框 -->
    <div id="novelModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>新增小说</h2>
            <form id="addNovelForm">
                <div class="form-group">
                    <label for="novelTitle">小说名称:</label>
                    <input type="text" id="novelTitle" name="title" required>
                </div>
                <div class="form-group">
                    <label for="novelUrl">小说地址:</label>
                    <input type="text" id="novelUrl" name="url" required>
                </div>
                <button type="submit" class="btn">保存</button>
            </form>
        </div>
    </div>

    <style>
        .novel-table {
            width: 100%;
            min-width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            table-layout: fixed;
        }
        .novel-table th,
        .novel-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        .novel-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .novel-table tr:hover {
            background-color: #f5f5f5;
        }
        .progress-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .progress-bar {
            flex: 1;
            height: 10px;
            background-color: #eee;
            border-radius: 5px;
            overflow: hidden;
        }
        .progress {
            height: 100%;
            background-color: #4caf50;
            transition: width 0.3s;
        }
        .btn {
            padding: 6px 12px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            text-decoration: none;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #45a049;
        }
        @media (max-width: 768px) {
            .novel-table {
                display: block;
                overflow-x: auto;
            }
            .modal-content {
                width: 90%;
            }
        }

        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 500px;
            border-radius: 5px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
    </style>

    <script>
        // 获取DOM元素
        const addNovelBtn = document.getElementById('addNovelBtn');
        const novelModal = document.getElementById('novelModal');
        const closeBtn = document.getElementsByClassName('close')[0];
        const addNovelForm = document.getElementById('addNovelForm');

        // 打开模态框
        addNovelBtn.addEventListener('click', function() {
            novelModal.style.display = 'block';
        });

        // 关闭模态框
        closeBtn.addEventListener('click', function() {
            novelModal.style.display = 'none';
        });

        // 点击模态框外部关闭
        window.addEventListener('click', function(event) {
            if (event.target == novelModal) {
                novelModal.style.display = 'none';
            }
        });

        // 表单提交
        addNovelForm.addEventListener('submit', function(event) {
            event.preventDefault();

            // 获取表单数据
            const title = document.getElementById('novelTitle').value;
            const url = document.getElementById('novelUrl').value;
    
            // 发送到后端处理
            fetch('/api/add_novel', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    title: title,
                    url: url
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 关闭模态框
                    novelModal.style.display = 'none';
                    // 重置表单
                    addNovelForm.reset();
                    // 刷新页面
                    location.reload();
                } else {
                    alert('添加失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('添加小说失败:', error);
                alert('添加小说失败，请重试');
            });
        });
    </script>
{% endblock %}